<template>
  <div class="page-container">
    <div class="holiday-title">
      节假日时间配置
      <span>（十一过后更新明年的节假日时间）</span>
    </div>
    <a-divider />
    <!-- 节假日列表 -->
    <div class="holiday-list">
      <table-index :table="table">
        <template #hilidayDate="{ record }">
          <template v-if="isEdit && !record.disabled">
            <i-range-picker
              popup-container=".confirm-cost-box"
              class="w-full"
              v-model="record.dateRange"
              :allow-clear="false"
              separator="至"
              :disabled-date="disabledDate(record)"
              @change="(value) => onDatePickerChange(value, record)"
            />
          </template>
          <template v-else>{{ `${record.startDate} 至 ${record.endDate}` }}</template>
        </template>
      </table-index>
    </div>
  </div>
</template>

<script setup name="HolidaySettings">
  import { ref, computed, onMounted } from 'vue'
  import dayjs from 'dayjs'
  import { baseHolidayDetail, baseHolidaySave } from '@/api/business/price.js'
  import { Message } from '@arco-design/web-vue'
  import { useTable } from '@/hooks/table'

  const isEdit = ref(false)
  const editBtnLabel = computed(() => {
    return isEdit.value ? '保存' : '编辑'
  })
  const table = useTable({
    rowClass: (record) => {
      if (record.disabled) {
        return 'disabled'
      } else {
        return ''
      }
    },
    columns: [
      { title: '节假日名称', dataIndex: 'holidayTypeName', width: 150 },
      { title: '日期', slotName: 'hilidayDate', width: 170 },
      { title: '操作人', dataIndex: 'updateUserName', width: 110 },
      { title: '操作时间', dataIndex: 'updateTime', width: 170 },
    ],
    dataList: [],
    pagination: false,
    buttons: [
      {
        label: editBtnLabel,
        type: 'primary',
        permission: 'svms:system:general:holiday-settings.edit',
        method: () => {
          if (isEdit.value) {
            const param = table.dataList
              .filter((item) => !item.disabled)
              .map((item) => {
                return {
                  holidayType: item.holidayType,
                  startDate: item.startDate,
                  endDate: item.endDate,
                }
              })
            baseHolidaySave(param)
              .then((res) => {
                Message.success(res.message)
                isEdit.value = false
                getHolidayDetail()
              })
              .catch(() => {
                done(false)
              })
          } else {
            isEdit.value = true
          }
        },
      },
    ],
  })
  const disabledDate = (item) => {
    return (date) => {
      const limitMin = dayjs(item.limitMin).unix()
      const limitMax = dayjs(item.limitMax).unix()
      return dayjs(date).unix() < limitMin || dayjs(date).unix() > limitMax
    }
  }
  const onDatePickerChange = (value, item) => {
    item.startDate = value[0]
    item.endDate = value[1]
  }
  const getHolidayDetail = () => {
    baseHolidayDetail({}).then((res) => {
      const result = res.result

      const nowDateStamp = dayjs(dayjs().format('YYYY-MM-DD')).unix()
      result.forEach((item) => {
        item.limitMin = dayjs(item.baseStartDate).subtract(10, 'day').format('YYYY-MM-DD')
        item.limitMax = dayjs(item.baseEndDate).add(10, 'day').format('YYYY-MM-DD')
        item.dateRange = [item.startDate, item.endDate]

        // 增加是否可编辑flag

        const limitMax = item.limitMax
        const limitMaxStamp = dayjs(limitMax).unix()
        item.disabled = nowDateStamp > limitMaxStamp
      })
      table.dataList = result
      table.tableLoading = false
    })
  }
  onMounted(() => {
    getHolidayDetail()
  })
</script>

<style lang="less" scoped>
  .holiday-title {
    font-weight: 600;
    font-size: 16px;
    color: #1d2129;
    display: flex;
    align-items: center;
    span {
      font-weight: 400;
      font-size: 12px;
      color: #86909c;
      margin-left: 9px;
    }
  }
  :deep(.arco-table-tr.disabled) {
    .arco-table-td {
      color: #a4acb5;
    }
  }
</style>
